<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>出院结算</title>
  <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
  <link rel="stylesheet" href="../../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
  <link rel="stylesheet" href="../../css/public.css" media="all">
  <style>
    #dataFrm{
      margin: -75px 0px 0px 500px;
    }
    .dataFrm_input{
      font-size: 16px;
      width: 150px;
      height: 20px;
      margin-right: 20px;
      margin-bottom: 8px;
    }
    .dataFrm_td{
      display: block;
      width: 80px;
      text-align: right;
    }
    #add{
      margin: 0px;
    }
    #addPay{
      width:200px;
      font-size: 16px;
      width: 150px;
      height: 30px;
      margin-right: 20px;
    }
    #ul{
      display: block;
      width: 740px;
    }
    #ul li{
      display: block;
      float: left;
      font-size: 16px;
      padding-top: 10px;
      width: 368px;
      height: 30px;
    }
  </style>
</head>
<body>
<!-- 搜索条件开始 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>查询条件</legend>
</fieldset>
<form class="layui-form" method="post" id="searchFrm">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">住院号:</label>
      <div class="layui-input-inline">
        <input type="number" id="shows" lay-verify="required|number" autocomplete="off" class="layui-input" style="width:200px" >
      </div>
    </div>
    <div class="layui-inline" style="position: absolute;left: 340px;top:66px;">
      <div class="layui-input-inline">
        <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-search" id="doSearch">查询</button>
        <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-survey" id="doSub" style="display: none;margin-left: -0px;">结算</button>
      </div>
    </div>
  </div>
</form>
<div style="display: none;padding: 20px" id="disShow" >
  <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
      <li class="layui-this">个人详情</li>
      <!-- <li>检查详情</li>-->
      <li>药品详情</li>
      <li>项目详情</li>
    </ul>
    <div class="layui-tab-content" style="height: 100px;">
      <div class="layui-tab-item layui-show">
        <ul id="ul">
          <li>姓名：<span id="userName1"></span></li>
          <li>科室：<span id="department1"></span></li>
          <li>性别：<span id="sex1"></span></li>
          <li>医生：<span id="doctorName1"></span></li>
          <li>年龄：<span id="age1"></span>岁</li>
          <li>床位：<span id="bedName1"></span></li>
          <li>电话：<span id="phone1"></span></li>
          <li>入住：<span id="day1"></span>天</li>
          <li>地址：<span id="address1"></span></li>
          <li>入住时间：<span id="registerDate1"></span></li>
          <li>身份证号：<span id="idcard1"></span></li>
          <li>出院时间：<span id="endDate1"></span></li>
          <li>初步诊断：<span id="diagnose1"></span></li>
          <li>总费用：<span id="price1"></span>元</li>
          <li>折扣：<span id="discount1"></span></li>
        </ul>
      </div>
      <!--<div class="layui-tab-item"><table class="layui-hide" id="checkup" lay-filter="checkup"></table></div>-->
      <div class="layui-tab-item"><table class="layui-hide" id="yao" lay-filter="yao"></table></div>
      <div class="layui-tab-item"><table class="layui-hide" id="xiangmu" lay-filter="xiangmu"></table></div>
    </div>
  </div>
</div>
<form class="layui-form"  lay-filter="dataFrm" id="dataFrm">
  <input type="hidden" id="show" name="registerid">
  <input type="hidden" id="hidden" name="moneys" value="0">
  <input type="hidden" id="hid" name="userNames">
  <table>
    <tr>
      <td class="dataFrm_td">姓名：</td>
      <td><input type="text" id="ceshi" class="dataFrm_input" name="userName" readonly></td>
      <td class="dataFrm_td">科室：</td>
      <td><input type="text" class="dataFrm_input" name="department" readonly></td>
      <td class="dataFrm_td">金额：</td>
      <td><input type="text" class="dataFrm_input" name="money" readonly></td>
    </tr>
    <tr>
      <td class="dataFrm_td">性别：</td>
      <td><input type="text" class="dataFrm_input" name="sex" readonly></td>
      <td class="dataFrm_td">医生：</td>
      <td><input type="text" class="dataFrm_input" name="doctorName" readonly></td>
      <td class="dataFrm_td">已用：</td>
      <td><input type="text" class="dataFrm_input" id="yong" name="price" readonly></td>
    </tr>
    <tr>
      <td class="dataFrm_td">年龄：</td>
      <td><input type="text" class="dataFrm_input" name="age" readonly></td>
      <td class="dataFrm_td">床位：</td>
      <td><input type="text" class="dataFrm_input" name="bedName" readonly></td>
      <td class="dataFrm_td">余款：</td>
      <td><input type="text" class="dataFrm_input" id="yu" name="prices" readonly></td>
    </tr>
  </table>
</form>
<!-- 数据表格开始 -->
<div  style="display: none;" id="ToolBar">
  <input type="text" name="pay" id="addPay" lay-verify="required|number" autocomplete="off" lay-event="addPay" placeholder="请输入患者名字" class="pay" >
  <button type="button" class="layui-btn layui-btn-sm" lay-event="add" id="add">查询</button>
</div>
<table class="layui-hide" id="pay" lay-filter="pay"></table>
<!-- 数据表格结束 -->
<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script type="text/javascript">
  var tableIns;
  layui.use([ 'jquery','element', 'layer', 'form', 'table'  ], function() {
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;
    var table = layui.table;
    var element = layui.element;
    var laydate = layui.laydate;
    //渲染数据表格
    tableIns=table.render({
      elem: '#pay'   //渲染的目标对象
      ,url:'/web/liao/selRegisters' //数据接口
      ,title: '用户数据表'//数据导出来的标题
      ,toolbar:"#ToolBar"   //表格的工具条
      ,height:'full-200'
      ,page: 1  //是否启用分页, limits: [10, 20, 30]
      ,limits: [7, 20, 30]
      ,limit: 7//默认采用3
      ,cols: [[   //列表数据
        {field:'userName', title:'姓名',align:'center',width:"7%"}
        ,{field:'sex', title:'性别',align:'center',width:"6%",sort: true}
        ,{field:'age', title:'年龄',align:'center',width:"6%",sort: true}
        ,{field:'idcard', title:'身份证号',align:'center',width:"13%"}
        ,{field:'department', title:'科室',align:'center',width:"7%"}
        ,{field:'doctorName', title:'医生',align:'center',width:"7%"}
        ,{field:'bedName', title:'床位',align:'center',width:"7%"}
        ,{field:'registerDate', title:'入院日期',align:'center',width:"11%",sort: true}
        ,{field:'endDate', title:'出院日期',align:'center',width:"11%",sort: true}
        ,{field:'money', title:'预交款',align:'center',width:"7%"}
        ,{field:'price', title:'已用',align:'center',width:"6%"}
        ,{field:'prices', title:'退款',align:'center',width:"6%",templet: function (d) {
            if (d.prices > 0){
              return d.prices
            }else{
              return 0;
            }
          }}
        ,{field:'prices', title:'补缴',align:'center',width:"6%",templet: function (d) {
            if (d.prices < 0){
              return 0-d.prices
            }else{
              return 0;
            }
          }}
      ]]
    })
    //药品显示
    table1=table.render({
      elem: '#yao'   //渲染的目标对象
      ,url:'' //数据接口
      ,title: '用户数据表'//数据导出来的标题
      ,height:'full-200'
      ,page: 1  //是否启用分页, limits: [10, 20, 30]
      ,limits: [7, 20, 30]
      ,limit: 7//默认采用3
      ,cols: [[   //列表数据
        {field:'hospitalpriceid', title:'序号',align:'center'}
        ,{field:'durgname', title:'药品名称',align:'center'}
        ,{field:'durgnum', title:'数量',align:'center'}
        ,{field:'repiceprice', title:'售价',align:'center'}
        ,{field:'repicetotal', title:'总价',align:'center'}
      ]]
    })
    //项目显示
    table2=table.render({
      elem: '#xiangmu'   //渲染的目标对象
      ,url:'' //数据接口
      ,title: '用户数据表'//数据导出来的标题
      ,height:'full-200'
      ,page: 1  //是否启用分页, limits: [10, 20, 30]
      ,limits: [7, 20, 30]
      ,limit: 7//默认采用3
      ,cols: [[   //列表数据
        {field:'hospitalpriceid', title:'序号',align:'center',width:"20%"}
        ,{field:'durgname', title:'项目名称',align:'center',width:"20%"}
        ,{field:'repiceprice', title:'售价',align:'center',width:"20%"}
        ,{field:'htime', title:'手术时间',templet: "<div>{{layui.util.toDateString(d.htime, 'yyyy年MM月dd日 HH:mm:ss')}}</div>",align:'center',width:"40%"}
      ]]
    })
    //检查详情
    table3=table.render({
      elem: '#checkup'   //渲染的目标对象
      ,url:'' //数据接口
      ,title: '用户数据表'//数据导出来的标题
      ,height:'full-200'
      ,page: 1  //是否启用分页, limits: [10, 20, 30]
      ,limits: [7, 20, 30]
      ,limit: 7//默认采用3
      ,cols: [[   //列表数据
        {field:'cid', title:'检查序号',align:'center',width:'20%'}
        ,{field:'userName', title:'姓名',align:'center',width:'20%'}
        ,{field:'content', title:'检查结果',align:'center',width:'20%'}
        ,{field:'ctime', title:'检查时间',templet: "<div>{{layui.util.toDateString(d.ctime, 'yyyy年MM月dd日 HH:mm:ss')}}</div>",align:'center',width:'40%'}
      ]]
    })
    //查询
    $("#doSearch").click(function(){
      if($("#shows").val()==""){
        layer.msg("请输入住院号！");
        $("#shows").select();
        return false;
      }
      $("#hidden").val(0);
      sel();
    });
    //失焦事件
    $("#shows").blur(function(){
      $("#dataFrm")[0].reset();
      $("#show").val($(this).val());
      $("#doSearch").show();
      $("#doSub").hide();
    });
    function sel(){
      var params=$("#dataFrm").serialize();
      $.ajax({
        url: '/web/liao/selPay',
        dataType: 'json',
        type: 'post',
        data:params,
        success: function (data) {
          if(data==""){
            layer.msg("请输入正确的住院号！");
            $("shows").select();
          }else{
            $.each(data, function (index, item) {
              for(var i in item){
                $("input[name="+i+"]").val(item[i])
              }
            });
            sels();
            $("#doSearch").hide();
            $("#doSub").show();
          }
        }
      })
    }
    table.on("toolbar(pay)",function(obj){
      if(obj.event=='addPay'){
        $("#hid").val("");
        $(this).blur(function(){
          $("#hid").val($(this).val());
        });
      }
      if(obj.event=='add') {
        var params=$("#dataFrm").serialize();
        tableIns.reload({
          url:"/web/liao/selRegisters?"+params
        })
        $("#hid").val("");
      }
    })
    function sels(){
      var params=$("#dataFrm").serialize();
      //查询余额
      $.post("/web/liao/selSurplus",params,function(inp) {
        if(inp==""){
          $("#yong").val(0);
        }else{
          $.each(inp, function (index, item) {
            for(var i in item){
              if(i=="repicetotal"){
                $("#yong").val(item[i]);
              }
            }
          });
        }
        $("#yu").val($("input[name='money']").val()-$("#yong").val());
      })
    }
    //文本框的键盘事件
    $("#shows").keydown(function(){
      $("#doSearch").show();
      $("#doSub").hide();
    });
    //文本框的点击事件
    $("#shows").click(function(){
      $("#doSearch").show();
      $("#doSub").hide();
    });
    //结算事件
    $("#doSub").click(function(){
      var params=$("#dataFrm").serialize();
      //判断是否还有尚未取出的药品
      $.post("/web/liao/selYaos",params,function(inp) {
        if(inp!=0){
          layer.msg("当前还有尚未取出的药品，请先去取药！");
        }else{
          //刷新已用
          sels();
          //获取剩余钱数
          var price=$("#yu").val();
          //显示是否需要补缴
          var inp="";
          if(price<0){
            price=price.substring(1);
            inp="需要补缴"+price+"元！是否确认出院？";
          }else if(price>0){
            inp="需要退回"+price+"元！是否确认出院？";
          }else{
            inp="当前没有剩余余款！是否确认出院？";
          }
          layer.confirm(inp, {
            btn : [ '确定', '取消' ]//按钮
          }, function(index) {
            layer.close(index);
            $.post("/web/liao/updLeave",params,function(inp) {
              layer.msg(inp);
              location.reload();
            })
          })
        }
      })
    });
    //监听行双击事件（双击事件为：rowDouble）
    table.on('rowDouble(pay)', function(obj){
      //获取当前行信息
      var data = obj.data;
      //标注选中样式
      obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
      //提示是否看详情
      layer.confirm("是否查看详情？", {
        btn : [ '是', '否' ]//按钮
      }, function(index) {
        layer.close(index);
        mainIndex=layer.open({
          type:1,
          title:'费用详情',
          content:$("#disShow"),
          area:['800px','550px'],
          success:function(index){
            $.post("/web/liao/selregis",{registerid:data.registerid},function(inp) {
              $.each(inp, function (index, item) {
                for(var i in item){
                  $("#"+i+"1").html(item[i]);
                }
              });
            })
            table1.reload({
              url:"/web/liao/selPhar?registerid="+data.registerid
            });
            table2.reload({
              url:"/web/liao/selItem?registerid="+data.registerid
            })
            table3.reload({
              url:"/web/liao/selCheckup?registerid="+data.registerid
            })
          }
        });
      })
    });
  });
</script>
</body>
</html>